<template>
  <div>
    <el-dialog
      title="编辑订单"
      :visible.sync="dialogshow"
      :before-close="dialogClose"
      style="display: none"
      top="10vh"
      width="90%"
      :fullscreen="fullscreen"
    >
      <dialog-tools
        v-bind:back="true"
        v-bind:next="true"
        v-bind:goback="true"
        v-bind:prev="true"
        v-bind:screen="true"
        @clickfullscreen="clickfullscreen"
      >
      </dialog-tools>
      <el-tabs
        class="tabs-table customer-tabs"
        type="border-card"
      >
        <el-tab-pane label="基本信息">
          <el-form
            size="mini"
            :model="customer"
            label-width="100px"
          >
          <el-row class="item-w230">
            <el-form-item label="订单单号" prop="name">
              <el-input
                v-model="customer.name"
                auto-complete="off"
                class="clientName"
              ></el-input>
            </el-form-item>

            <el-form-item label="客户名称">
              <el-input
                v-model="customer.customercode"
                auto-complete="off"
                @click.native="handleButtons(2)"
              ></el-input>
            </el-form-item>

            <el-form-item label="客户代码" prop="customercate">
              <el-input
                v-model="customer.bankaccount"
                auto-complete="off"
              ></el-input>
            </el-form-item>

            <el-form-item label="联系人" prop="creditrank">
              <el-input
                v-model="customer.certificateno"
                auto-complete="off"
              ></el-input>
            </el-form-item>

            <el-form-item label="出货日期" prop="field101">
              <el-date-picker
                v-model="formData.field101"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="出货日期"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-row>
          <el-row class="item-w230">

            <el-form-item label="币种">
              <el-input v-model="customer.bank" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="汇率">
              <el-input v-model="customer.bank" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="结款方式">
              <el-select
                v-model="customer.creditrank"
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="item in crmsclientStatic"
                  :label="item.typename"
                  :key="item.id"
                  :value="item.typename"
                ></el-option>
              </el-select>
            </el-form-item>
                        <el-form-item label="定价时间" prop="field101">
              <el-date-picker
                v-model="formData.field101"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="定价日期"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-row>
          <el-row class="item-w230">
            <el-form-item label="结料方式">
              <el-select
                v-model="customer.creditrank"
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="item in crmsclientStatic"
                  :label="item.typename"
                  :key="item.id"
                  :value="item.typename"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="收货人">
              <el-input
                v-model="customer.address"
                auto-complete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="收货地址">
              <el-input
                v-model="customer.address"
                auto-complete="off"
              ></el-input>
            </el-form-item> -->
            <el-form-item label="开票类型">
              <el-input v-model="customer.brand" auto-complete="off"></el-input>
            </el-form-item>
          </el-row>

          </el-form>
          <el-table
            ref="multipleTable"
            stripe
            :data="tableData"
            :show-summary="false"
            border
            height="500"
            row-class-name="tableRow"
            header-row-class-name="tableHeader"
            :highlight-current-row="true"
            @row-dblclick="handleButtons(22)"
            style="width: 100%; border-top: 1px solid #c5c5c5"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="序号" sortable width="80">
            </el-table-column>
            <el-table-column prop="image" label="图片" width="120">
              <template scope="scope">
                <img
                  :src="scope.row.image"
                  width="40"
                  height="40"
                  class="head_pic"
                />
              </template>
            </el-table-column>
            <el-table-column prop="bjdh" label="报价单号" sortable width="120">
            </el-table-column>
            <el-table-column prop="wpmc" label="物品名称" sortable width="120">
            </el-table-column>
            <el-table-column prop="wppl" label="物品品类" sortable width="120">
            </el-table-column>
            <!-- <el-table-column prop="dw" label="单位" sortable width="80">
            </el-table-column> -->
            <el-table-column prop="number" label="数量" sortable width="80">
            </el-table-column>
            <el-table-column prop="bjlx" label="报价类型" sortable width="120">
            </el-table-column>
            <el-table-column prop="price" label="价格" sortable width="120">
            </el-table-column>
            <el-table-column prop="kh" label="款号" sortable width="120">
            </el-table-column>
            <!-- <el-table-column prop="kh" label="库存" sortable width="120">
            </el-table-column> -->
            <el-table-column prop="ks" label="款式" sortable width="120">
            </el-table-column>
            <el-table-column prop="ggcc" label="规格尺寸" sortable width="120">
            </el-table-column>
            <el-table-column
              prop="gjspl"
              label="金属品类"
              sortable
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="gjsys"
              label="金属颜色"
              sortable
              width="120"
            >
            </el-table-column>
            <el-table-column prop="zsmc" label="主石名称" sortable width="120">
            </el-table-column>
            <el-table-column prop="zsys" label="主石颜色" sortable width="120">
            </el-table-column>
            <el-table-column prop="fsmc" label="副石名称" width="120">
            </el-table-column>
            <el-table-column prop="fsys" label="副石颜色" width="120">
            </el-table-column>
            <el-table-column prop="cjr" label="创建人" width="120">
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" width="120">
            </el-table-column>
            <el-table-column prop="update_time" label="更新时间" width="120">
            </el-table-column>
            <el-table-column fixed="right" width="140">
              <template slot="header" >
                <!-- <el-tooltip content="添加" placement="bottom">
                  <el-button
                    @click="handleButtons(23)"
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                  >
                  </el-button>
                </el-tooltip> -->

                <el-popover
  placement="top"
  width="160"
  v-model="visibleadd"
  >
  <div style="text-align:center; margin: 0">

    <!-- <el-button type="primary" size="mini" @click.native="visibleadd = false">新建报价</el-button> -->
  </div>
  <el-button slot="reference" type="primary" icon="el-icon-plus" size="mini"></el-button>
</el-popover>




                <el-tooltip content="删除选中" placement="bottom">
                  <el-button
                    @click="dialogAdd"
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    style="margin-left:10px;"
                  >
                  </el-button>
                </el-tooltip>
              </template>
              <template >
                <el-tooltip content="修改" placement="bottom">
                  <el-button
                    @click="handleButtons(22)"
                    type="primary"
                    icon="el-icon-edit-outline"
                    size="mini"
                  >
                  </el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="bottom">
                  <el-button
                    @click="dialogAdd"
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                  >
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="详细信息" name="third"> </el-tab-pane>
        <el-tab-pane label="备注信息" name="bs">
          <el-input
            type="textarea"
            v-model="customer.name"
            placeholder="备注"
          ></el-input>

          <el-divider></el-divider>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <!-- <el-dropdown style="float: left; margin-left: 15px">
          <el-button>
            关联数据<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>设计图</el-dropdown-item>
            <el-dropdown-item>客来石</el-dropdown-item>
            <el-dropdown-item>客来金</el-dropdown-item>
            <el-dropdown-item>其它...</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button
          style="float: left; margin-left: 15px"
          @click="handleButtons(3)"
          icon="el-icon-search"
          >添加产品</el-button
        > -->



        <el-button
                style="float: left; margin-left: 15px"
                @click="handleButtons(31)"
                icon="el-icon-search"
        >查询导入
        </el-button
        >
        <el-button
                style="float: left; margin-left: 15px"
                @click="handleButtons(23)"
                icon="el-icon-search"
        >新创
        </el-button
        >

        <el-button type="primary">打印</el-button>
        <!-- <el-button type="primary">订单预览</el-button> -->
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" @click="dialogAdd">确定</el-button>
      </div>
    </el-dialog>

    <!-- <customer-genji
                v-bind:dialogshow="dialogCustomerGenji"
                @dialog_close="dialog_close_genji_customer"
        ></customer-genji> -->
    <dialog-search-customer
      v-bind:dialogshow="dialogSearchCustomer"
      @dialog_close="dialog_close_search_customer"
    ></dialog-search-customer>
    <dialog-search-product
      v-bind:dialogshow="dialogSearchProduct"
      @dialog_close="dialog_close_search_product"
    ></dialog-search-product>
        <baojia-add
      v-bind:dialogshow="dialogBaojiaAdd"
      @dialog_close="dialog_close_baojiaadd"
    ></baojia-add>
    <baojia-edit
      v-bind:dialogshow="dialogBaojiaEdit"
      @dialog_close="dialog_close_baojiaedit"
    ></baojia-edit>

    <search-product-and-baojia
      v-bind:dialogshow="dialogSearchProductAndBaojia"
      @dialog_close="dialog_close_search_productandbaojia"
    ></search-product-and-baojia>


  </div>
</template>

<style scoped>
#customerDialog .el-form-item {
  width: 45%;
  float: left;
  margin-bottom: 5px;
}

#customerDialog .el-form-item:nth-child(odd) {
  float: right;
}

.el-dialog__body,
.el-form {
  overflow: hidden;
}

#customerDetail .el-form {
  border: 1px solid #c5c5c5;
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.el-form .item-w230 .el-form-item {
  width: 230px;
  float: left;
  margin-bottom: 5px;
}
.el-form .el-row {
  margin-bottom: 0px;
}
.el-form .el-form--label-top .el-form-item__label {
  padding-bottom: 0px;
}
.el-form .el-divider--horizontal {
  margin: 5px 0;
}

.td-lable,
.td-info {
  display: inline-table;
  vertical-align: -webkit-baseline-middle;
}

.td-lable {
  text-align: right;
  width: 100px;
}

.td-info {
  margin-left: 20px;
}

ul {
  list-style-type: none;
}

ul span {
  display: inline-table;
  min-width: 200px;
}

.tabs-table td {
  height: 50px;
  border-bottom: 1px solid #dcdfe6;
}
.customer-tabs .el-tab-pane {
  height: 400px;
  overflow: auto;
  padding: 20px;
}
</style>

<script>
module.exports = {
  methods: {
    dialogAdd() {
      this.$confirm("是否继续操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    dialogClose() {
      this.$emit("dialog_close", 1);
    },
    clickfullscreen() {
      this.fullscreen = !this.fullscreen;
    },
    //跟进
    dialog_close_genji_customer(val) {
      console.log(val);
      this.dialogCustomerGenji = false;
    },
    dialog_close_search_customer(val) {
      console.log(val);
      this.dialogSearchCustomer = false;
    },
    dialog_close_search_product(val) {
      console.log(val);
      this.dialogSearchProduct = false;
    },
    dialog_close_baojiaedit(val) {
      console.log(val);
      this.dialogBaojiaEdit = false;
    },
    dialog_close_baojiaadd(val){
      console.log(val);
      this.dialogBaojiaAdd = false;
    },
    dialog_close_search_productandbaojia(val){
      console.log(val);
      this.dialogSearchProductAndBaojia = false;
    },


    handleButtons(val) {
      console.log(2222);
      switch (val) {
        case 1:
          this.dialogSendMessage = true;
          console.log(this.dialogSendMessage);
          break;
        case 2:
          console.log(333);
          this.dialogSearchCustomer = true;
          console.log(this.dialogSearchCustomer);
          break;
        case 3:
          console.log(333);
          this.dialogSearchProduct = true;
          console.log(this.dialogSearchProduct);
          break;
        case 31:
          console.log(333);
          this.dialogSearchProductAndBaojia = true;
          console.log(this.dialogSearchProductAndBaojia);
          break;


        case 10:
          console.log(333);
          this.dialogCustomerInfo = false;
          this.dialogCustomerGenji = true;
          console.log(this.dialogCustomerGenji);
          break;
        case 22: //编辑报价
          console.log("编辑报价");
          this.dialogBaojiaEdit = true;
          console.log(this.dialogBaojiaEdit);
          break;
        case 23: //编辑报价
          console.log("新建报价");
          this.dialogBaojiaAdd = true;
          console.log(this.dialogBaojiaAdd);
          break;
      }
    },
    addData() {
      this.tableDatas.push({
        edit: true,
      });
    },
    //确认添加
    confirmAdd(row) {
      row.edit = false;
    },
    //修改
    editData(row) {
      row.edit = true;
    },
    //删除
    deleteData(row, index) {
      this.tableDatas.splice(index, 1);
    },
  },
  props: ["dialogshow"],
  data() {
    return {
      dialogSearchProductAndBaojia:false,
      dialogBaojiaAdd:false,
      dialogBaojiaEdit: false,
      dialogSendMessage: false,
      dialogCustomerInfo: false,
      dialogCustomerGenji: false,
      // dialogshow:false,
      dialogSendMessage: false,
      // dialogCustomerInfo: false,
      // dialogCustomerGenji: false,
      dialogSearchCustomer: false,
      dialogSearchProduct: false,
      visibleadd:false,
      Sendmssages: {
        address: "",
        customercate: "",
        cate: "",
        nickname: "",
        creditrank: "",
        name: "",
      },

      tableData: [
        {
          id: "1",
          create_time: "2016-05-02 08:08:08",
          update_time: "2016-05-02 08:08:08",
          image: "/public/images/eh1.jpg",
          kfmc: "某珠宝公司",
          kflxr: "王先生",
          wpmc: "钻石戒指",
          spzt: "审批中",
          dw:"",
          number:"1",
          bjdh:222,
          price: 20000,
          bjlx:"预算",
          wppl: "戒指",
          kh: "WERWQE123",
          ks:"普通",
          wpdj: "A类",
          dw: "件",
          gjsp: "铂金999.99%",
          fsys: "红",
        },
        {
          id: "2",
          create_time: "2016-05-02 08:08:08",
          update_time: "2016-05-02 08:08:08",
          image: "/public/images/eh1.jpg",
          kfmc: "某珠宝公司",
          kflxr: "王先生",
          wpmc: "红宝石戒指",
          bjlx:"成品",
          number:"1",
          bjdh:223,
          price: 20000,
          spzt: "审批中",
          wppl: "戒指",
          ks:"豪华",
          kh: "WERWQE123",
          wpdj: "A类",
          dw: "件",
          gjsp: "铂金999.99%",
          fsys: "红",
        },
        {
          id: "3",
          create_time: "2016-05-02 08:08:08",
          update_time: "2016-05-02 08:08:08",
          image: "/public/images/eh1.jpg",
          kfmc: "某珠宝公司",
          kflxr: "王先生",
          wpmc: "戒指",
          spzt: "审批中",
          wppl: "戒指",
          kh: "WERWQE123",
          wpdj: "A类",
          dw: "件",
          gjsp: "铂金999.99%",
          fsys: "红",
        },
        {
          id: "4",
        },
        {
          id: "5",
        },
      ],
      formData: {
        field101: null,
      },
      rules: {
        field101: [],
      },

      customerstaffs: [
        { typename: "员工一" },
        { typename: "员工二" },
        { typename: "员工三" },
        { typename: "员工四" },
      ],
      changeReason: [
        { typename: "原因一" },
        { typename: "原因二" },
        { typename: "原因三" },
        { typename: "原因四" },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      customer: {
        name: "",
        customercode: "",
        customerstatus: "",
        customercate: "",
        creditrank: "",
        creditline: "",
        capital: "",
        annualsales: "",
        bank: "",
        certificateno: "",
        address: "",
        area: "",
        brand: "",
        bankaccount: "",
        trademark: "",
        website: "",
        lperson: "",
        lphone: "",
        contacts: "",

        phone: "",
        phonenum: "",
        weixin: "",
        email: "",
        fax: "",
        resource: "",
        requirement: "",
        ordercountmonth: "",
        purchaseamountmonth: "",
        ordercountyear: "",
        purchaseamountyear: "",
        customerstaffname: "",
        customerstaffcode: "",
        operator: "",
        insertime: "",
        remark: "",
      },
      crmsclientStatic: [
        { id: 1, typename: "A级" },
        { id: 2, typename: "B级" },
        { id: 3, typename: "C级" },
        { id: 4, typename: "D级" },
      ],

      scheduleType: [
        { typename: "业务拓展" },
        { typename: "订单跟进" },
        { typename: "料/款跟进" },
      ],

      cates: [{ typename: "意向客户" }, { typename: "老客户" }],

      crmsclientRank: [
        { typename: "A类" },
        { typename: "B类" },
        { typename: "C类" },
        { typename: "D类" },
      ],
      fullscreen: false,
    };
  },
  components: {
    "dialog-tools": "url:../tools/dialog-tools.vue",
    "dialog-search-customer": "url:./search-customer.vue",
    "dialog-search-product": "url:./search-product.vue",
    "search-product-and-baojia": "url:./search-product-and-baojia.vue",
    "baojia-edit": "url:./baojia-edit.vue",
    "baojia-add": "url:./baojia-add.vue",
    //   'genjin-jilu': 'url:../genjin-jilu.vue',
    //   'customer-genji': 'url:../customer-genji.vue',
  },
};
</script>
